<template>
    <view class="container">
        <header-bar :config="config" @rightClick="rightClick"></header-bar>
        <view class="cell-multi">
            <view class="cell-multi-item">
                <view class="cell-item multi-header" @click="showBase = !showBase">
                    <view class="header-title">
                        <image src="/static/img/jcxx.png"></image>基本信息
                    </view>
                    <view class="header-icon">
                        <view>{{ showBase ? "收起" : "展开" }}</view><uni-icons :type="showBase ? 'arrowup' : 'arrowdown'"
                            customIcons="color-gray"></uni-icons>
                    </view>
                </view>
                <view class="multi-sub" v-show="showBase">
                    <view class="sub-item">
                        <view class="cell-item input-item">
                            <text class="label">客户名称</text>
                            <input class="value value-input" v-model="addParam.StoreName" placeholder="请输入名称 (必填)"
                                placeholder-class="input-placeholder" />
                        </view>
                    </view>
                    <view class="sub-item">
                        <view class="cell-item select-item touch" @click="selectLevel">
                            <text class="label">客户等级</text>
                            <text class="value">{{
                                addParam.DealerGradeName ? addParam.DealerGradeName : "请选择级别 (必填)"
                                }}</text>
                            <uni-icons class="icon-right" type="arrowright"></uni-icons>
                        </view>
                    </view>
                    <view class="sub-item">
                        <view class="cell-item select-item touch" @click="selectDepartment">
                            <text class="label">所属部门</text>
                            <text class="value">{{ addParam.DisName ? addParam.DisName : "" }}</text>
                            <uni-icons class="icon-right" type="arrowright" v-if="false"></uni-icons>
                        </view>
                    </view>
                    <view class="sub-item">
                        <view class="cell-item select-item touch" @click="selectSalesman">
                            <text class="label">所属业务员</text>
                            <text class="value">{{ addParam.WorkerName ? addParam.WorkerName : "" }}</text>
                            <uni-icons class="icon-right" type="arrowright" v-if="false"></uni-icons>
                        </view>
                    </view>
                    <view class="sub-item">
                        <view class="cell-item select-item touch" @click="selectInviter">
                            <text class="label">推荐人</text>
                            <text class="value">{{ addParam.InvitNickName ? addParam.InvitNickName : "请选择" }}</text>
                            <uni-icons class="icon-right" type="arrowright"></uni-icons>
                        </view>
                    </view>
                    <view class="sub-item">
                        <view class="cell-item select-item touch" @click="selectTag">
                            <text class="label">客户标签</text>
                            <text class="value">{{ addParam.StoreTagNames ? addParam.StoreTagNames : "请选择" }}</text>
                            <uni-icons class="icon-right" type="arrowright"></uni-icons>
                        </view>
                    </view>
                    <!-- <view class="sub-item">
						<view class="cell-item select-item touch" @click="selectPayWay">
							<text class="label">结算方式</text>
							<text class="value">{{addParam.settlement?addParam.settlement:'请选择'}}</text>
							<uni-icons class="icon-right" type="arrowright"></uni-icons>
						</view>
					</view>
					<view class="sub-item">
						<view class="cell-item select-item touch" @click="selectWarehouse">
							<text class="label">默认发货仓库</text>
							<text class="value">{{addParam.WarehouseName?addParam.WarehouseName:'默认仓库'}}</text>
							<uni-icons class="icon-right" type="arrowright"></uni-icons>
						</view>
					</view> -->
                    <view class="sub-item" v-if="false">
                        <view class="cell-item select-item touch">
                            <text class="label">默认发货仓库</text>
                            <text class="value">默认仓库</text>
                            <uni-icons class="icon-right" type="arrowright" v-if="false"></uni-icons>
                        </view>
                    </view>
                    <view class="sub-item">
                        <view class="cell-item select-item" @click="selectCity">
                            <text class="label">所在地区</text>
                            <view class="value">{{ addParam.region ? addParam.region : "请选择" }}</view>
                            <uni-icons class="icon-right" type="arrowright"></uni-icons>
                        </view>
                    </view>
                    <view class="sub-item">
                        <view class="cell-item address-item">
                            <text class="label">详细地址</text>
                            <view class="dingwei">
                                <textarea class="value-textarea" v-model="addParam.ContactAddress" placeholder="请填写详细地址"
                                    placeholder-class="input-placeholder"></textarea>
                                <!-- <view class="btn-location" @click="selectAddress">
                                    <image src="/static/img/map.png"></image>
                                    <text>{{ addParam.Longitude ? "已定位" : "添加定位" }}</text>
                                </view> -->
                            </view>
                        </view>
                    </view>
                    <view class="sub-item" v-if="StoreId">
                        <view class="cell-item input-item flex-s-c">
                            <text class="label">订货账号</text>
                            <view class="value">{{ addParam.ContactTel }}</view>
                            <view class="operation-btn">
                                <text @click="reset">重置密码</text>
                                <text @click="stateChange(3)" v-if="addParam.Status == 1">禁用</text>
                                <text @click="stateChange(1)" v-else>启用</text>
                            </view>
                        </view>
                    </view>
                    <!-- <view class="sub-item">
						<view class="cell-item input-item">
							<text class="label">密码</text>
							<input class="value value-input" v-model="addParam.password" password="" placeholder="请输入密码"
								placeholder-class="input-placeholder" />
						</view>
					</view> -->
                </view>
            </view>
            <view class="cell-multi-item">
                <view class="cell-item multi-header" @click="showContact = !showContact">
                    <view class="header-title">
                        <image src="/static/img/lxrxx.png"></image>联系人信息
                    </view>
                    <view class="header-icon">
                        <view>{{ showContact ? "收起" : "展开" }}</view><uni-icons
                            :type="showContact ? 'arrowup' : 'arrowdown'" customIcons="color-gray"></uni-icons>
                    </view>
                </view>
                <view class="multi-sub" v-show="showContact">
                    <view class="sub-item">
                        <view class="cell-item input-item">
                            <text class="label">姓名</text>
                            <input class="value value-input" v-model="addParam.RealName" placeholder="请输入姓名 (必填)"
                                placeholder-class="input-placeholder" />
                        </view>
                    </view>
                    <view class="sub-item">
                        <view class="cell-item input-item">
                            <text class="label">手机</text>
                            <input class="value value-input" v-model="addParam.ContactTel" maxlength="11" type="number"
                                placeholder="请输入手机号 (必填)" placeholder-class="input-placeholder" />
                        </view>
                    </view>
                    <view class="sub-item">
                        <view class="cell-item input-item">
                            <text class="label">邮箱</text>
                            <input class="value value-input" v-model="addParam.Email" placeholder="请输入邮箱"
                                placeholder-class="input-placeholder" />
                        </view>
                    </view>
                </view>
            </view>
            <!-- 			<view class="cell-multi-item">
				<view class="cell-item multi-header" @click="showFinance=!showFinance">
					<text class="header-title">财务信息</text>
					<uni-icons :type="showFinance?'arrowup':'arrowdown'"></uni-icons>
				</view>
				<view class="multi-sub" v-show="showFinance">
					<view class="sub-item">
						<view class="cell-item input-item">
							<text class="label">发票抬头</text>
							<input class="value value-input"  placeholder="请输入"
								placeholder-class="input-placeholder" />
						</view>
					</view>
					<view class="sub-item">
						<view class="cell-item input-item">
							<text class="label">纳税人识别号</text>
							<input class="value value-input"  placeholder="请输入"
								placeholder-class="input-placeholder" />
						</view>
					</view>
					<view class="sub-item">
						<view class="cell-item input-item">
							<text class="label">地址</text>
							<input class="value value-input"  placeholder="请输入"
								placeholder-class="input-placeholder" />
						</view>
					</view>
					<view class="sub-item">
						<view class="cell-item input-item">
							<text class="label">财务电话</text>
							<input class="value value-input"  placeholder="请输入"
								placeholder-class="input-placeholder" />
						</view>
					</view>
					<view class="sub-item">
						<view class="cell-item input-item">
							<text class="label">开户名称</text>
							<input class="value value-input"  placeholder="请输入"
								placeholder-class="input-placeholder" />
						</view>
					</view>
					<view class="sub-item">
						<view class="cell-item input-item">
							<text class="label">开户银行</text>
							<input class="value value-input"  placeholder="请输入"
								placeholder-class="input-placeholder" />
						</view>
					</view>
					<view class="sub-item">
						<view class="cell-item input-item">
							<text class="label">银行账号</text>
							<input class="value value-input"  placeholder="请输入"
								placeholder-class="input-placeholder" />
						</view>
					</view>
				</view>
			</view> -->
        </view>
        <uni-popup ref="popPayWay" type="bottom" background-color="#fff" :safe-area="false">
            <view class="custom-actions-pop">
                <view class="custom-actions">
                    <button v-for="(item, index) in payWays" :key="index" class="btn btn-gray"
                        :class="addParam.settlement == item.name ? 'selected-text' : ''" @click="selectPayWayFn(item)">
                        {{ item.name }}
                    </button>
                </view>
                <view class="cancel">
                    <button class="btn btn-gray" @click="cancelSelectPayWayFn()">取消</button>
                </view>
            </view>
        </uni-popup>
        <uni-popup ref="reset" type="dialog">
            <uni-popup-dialog type="text" title="重置密码" :before-close="true" @confirm="resetSave" @close="close">
                <view>
                    <input style="padding: 20px 0" maxlength="20" v-model="pwd" type="password"
                        placeholder="请输入6-20位密码" />
                </view>
            </uni-popup-dialog>
        </uni-popup>
        <uni-popup ref="state" type="dialog">
            <uni-popup-dialog type="text" title="" :before-close="true" @confirm="stateSave" @close="stateclose">
                <view style="padding: 20px 0">确认{{ addParam.Status == 1 ? "禁用" : "启用" }}该账号？</view>
            </uni-popup-dialog>
        </uni-popup>
    </view>
</template>

<script>
import { mapMutations } from "vuex"
import {
    GuideAddStore,
    GetGuideStoreDetail,
    GuideEditStore,
    SetStoreStatus,
    GetFrameworkTree,
    GetDisPersonnel,
} from "@/service/api/store.js"
import { InitPassword } from "@/service/api/user.js"
import { mapbatchSmartParse } from "@/service/api/user.js"
import storage from "@/uni-sub-base/utils/storage.js"
export default {
    components: {},
    data() {
        return {
            pwd: "",
            StoreId: "",
            StoreUserId: "",
            config: {
                title: "新增客户",
                centerSlot: true,
                rightSlot: true,
                rightBtns: [
                    {
                        btnType: 1,
                        type: "保存",
                        color: 'red',
                        size: '32rpx',
                        bold: 'bold'
                    },
                ],
            },
            showBase: true,
            showContact: true,
            showFinance: false,
            addParam: {
                StoreName: "",
                DealerGradeName: "",
                DisName: "",
                WorkerName: "",
                InvitNickName: "",
                StoreTagNames: "",
                StoreTagIds: null,
                settlement: "",
                WarehouseName: "",
                region: "",
                ContactAddress: "",
                RealName: "",
                ContactTel: "",
                Email: "",
                UserName: "",
                password: "",
                ProvinceId: 0,
                ProvinceName: "",
                CityId: 0,
                CityName: "",
                AreaId: 0,
                AreaName: "",
                StreetId: 0,
                StreetName: "",
                InvitUserId: 0,
                // WarehouseId: null,
                DealerGradeId: null,
                DisId: 0,
                FrameworkId: 0,
                Longitude: "",
                Latitude: "",
                WorkerId: 0,
            },
            loactionData: {
                AddressName: "",
                RealName: "",
                ContactTel: "",
                ContactAddress: "",
                IsDefault: false,
                ProvinceId: 0,
                ProvinceName: "",
                CityId: 0,
                CityName: "",
                AreaId: 0,
                AreaName: "",
                StreetId: 0,
                StreetName: "",
                ZipCode: null,
            },
            state: "",
            payWays: [
                {
                    id: 1,
                    name: "预付",
                },
                {
                    id: 2,
                    name: "现付",
                },
                {
                    id: 3,
                    name: "后付",
                },
            ],
            submitOne: false,
        }
    },
    onLoad(e) {
        if (e) {
            this.StoreId = e.StoreId
            this.StoreUserId = e.StoreUserId
        }
    },
    mounted() {
        if (this.StoreId) {
            this.config.title = "编辑客户信息"
            this.getGuideStoreDetail()
        }
        this.getFrameworkTree()
        this.getDisPersonnel()
    },
    onShow() { },
    methods: {
        ...mapMutations(["UP_CLIENT_VIEW"]),
        getGuideStoreDetail() {
            let param = {
                storeId: this.StoreId,
                storeUserId: this.StoreUserId,
            }
            GetGuideStoreDetail(param).then((res) => {
                if (res.State == 1) {
                    this.StoreId = res.Data.ID
                    this.addParam = res.Data
                    if (!this.addParam.Longitude || !this.addParam.Latitude) {
                        this.addParam.Longitude = ""
                        this.addParam.Latitude = ""
                    }
                    //补充信息
                    this.addParam.StoreId = this.StoreId
                    this.getRegionName()
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        getFrameworkTree() {
            GetFrameworkTree({ level: 0 }).then((res) => {
                if (res.State == 1) {
                    let data = res.Data
                    this.addParam.DisId = data.DisId
                    this.addParam.DisName = data.name
                    this.addParam.FrameworkId = data.FrameworkId
                }
            })
        },
        getDisPersonnel() {
            GetDisPersonnel({ joinPosition: 5 }).then((res) => {
                if (res.State == 1) {
                    let userInfo = storage.getCache("userInfo")
                    let data = res.Data.find((e) => {
                        return e.Tel == userInfo.Tel
                    })
                    this.addParam.WorkerId = data.ID
                    this.addParam.WorkerName = data.RealName
                }
            })
        },
        getRegionName() {
            let line = "-"
            if (this.addParam.ProvinceName) {
                this.addParam.region = `${this.addParam.ProvinceName || ""}-${this.addParam.CityName || ""}${this.addParam.AreaName ? line + this.addParam.AreaName : ""
                    }${this.addParam.StreetName ? line + this.addParam.StreetName : ""}`
            }
            this.$forceUpdate()
        },
        reset() {
            this.$refs.reset.open()
        },
        close() {
            this.$refs.reset.close()
        },
        resetSave() {
            if (this.pwd == "") {
                this.easyToast("请输入要重置的密码")
                return false
            }
            if (this.pwd.length < 6) {
                this.easyToast("请输入6-20位密码")
                return false
            }
            let path = "?userId=" + this.addParam.StoreUserId + "&pwd=" + this.pwd
            InitPassword(path).then((res) => {
                if (res.State == 1 && res.Data) {
                    this.$refs.reset.close()
                    this.easyToast("密码重置成功")
                    this.pwd = ""
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        stateChange(num) {
            this.$refs.state.open()
            this.state = num
        },
        stateclose() {
            this.$refs.state.close()
        },
        stateSave() {
            let path = "?storeId=" + this.addParam.ID + "&state=" + this.state
            SetStoreStatus(path).then((res) => {
                if (res.State == 1) {
                    this.$refs.state.close()
                    if (this.state == 1) {
                        this.easyToast("账号启用成功")
                    } else {
                        this.easyToast("账号禁用成功")
                    }
                    this.getGuideStoreDetail()
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        selectCity() {
            uni.navigateTo({
                url: "/pages/select/select-city?data=" + encodeURIComponent(JSON.stringify(this.addParam)) + "&type=0",
                events: {
                    getSelectData: (data) => {
                        console.log(data)
                        if (data) {
                            this.addParam = data
                            this.addParam.region = data.regionName
                            this.addParam.ProvinceId = data.ProvinceId
                            this.addParam.ProvinceName = data.ProvinceName
                            this.addParam.CityId = data.CityId
                            this.addParam.CityName = data.CityName
                            this.addParam.AreaId = data.AreaId
                            this.addParam.AreaName = data.AreaName
                            this.addParam.StreetId = data.StreetId
                            this.addParam.StreetName = data.StreetName
                            this.$forceUpdate()
                        }
                    },
                },
            })
        },
        selectDepartment() {
            return
            uni.navigateTo({
                url: "/pages/select/select-department",
                events: {
                    getSelectData: (data) => {
                        if (data) {
                            this.addParam.DisId = data.DisId
                            this.addParam.DisName = data.name
                            this.addParam.FrameworkId = data.FrameworkId
                        }
                    },
                },
            })
        },
        selectLevel() {
            uni.navigateTo({
                url: "/pages/select/select-level",
                events: {
                    getSelectData: (data) => {
                        console.log(data)
                        if (data) {
                            this.addParam.DealerGradeId = data.ID
                            this.addParam.DealerGradeName = data.Name
                        }
                    },
                },
            })
        },
        selectSalesman() {
            return
            uni.navigateTo({
                url: "/pages/select/select-salesman",
                events: {
                    getSelectData: (data) => {
                        this.addParam.WorkerId = data.ID
                        this.addParam.WorkerName = data.RealName
                    },
                },
            })
        },
        selectInviter() {
            uni.navigateTo({
                url: "/pages/select/select-inviter",
                events: {
                    getSelectData: (data) => {
                        if (data.type == 2) {
                            this.addParam.InvitUserId = data.StoreUserId
                        } else {
                            this.addParam.InvitUserId = data.UserId
                        }
                        this.addParam.InvitNickName = data.StoreName
                    },
                },
            })
        },
        selectWarehouse() {
            uni.navigateTo({
                url: "/pages/select/select-warehouse",
                events: {
                    getSelectData: (data) => {
                        this.addParam.WarehouseId = data.WarehouseId
                        this.addParam.WarehouseName = data.Address
                    },
                },
            })
        },
        selectTag() {
            uni.navigateTo({
                url: "/pages/select/select-tag",
                events: {
                    getSelectData: (data) => {
                        this.addParam.StoreTagIds = data.ID
                        this.addParam.StoreTagNames = data.Name
                    },
                },
            })
        },
        selectAddress() {
            let that = this
            // uni.navigateTo({
            // 	url: '/pages/map/map-poi',
            // 	events: {
            // 		getSelectData: (data) => {
            // 			console.log(123)
            // 			console.log(data)
            // 			this.getmapP(data)
            // 			this.addParam.ContactAddress = data.address.replace(/\\/g, '')
            // 			this.addParam.Longitude = data.location.longitude
            // 			this.addParam.Latitude = data.location.latitude
            // 		}
            // 	}
            // })
            uni.chooseLocation({
                success: function (res) {
                    console.log(res)
                    console.log("位置名称：" + res.name)
                    console.log("详细地址：" + res.address)
                    console.log("纬度：" + res.latitude)
                    console.log("经度：" + res.longitude)
                    that.getmapP(res)
                    that.addParam.ContactAddress = res.name
                    that.addParam.Longitude = res.longitude
                    that.addParam.Latitude = res.latitude
                },
            })
        },
        getmapP(res) {
            let item = {
                ContactAddress: res.address,
                // "ProvinceName": res.province,
                // "CityName": res.city,
                // "AreaName": res.district,
                // "StreeName":'',
                ContactName: "aaa",
                ContactTel: "13300000000",
            }
            let list = []
            list.push(item)
            let param = {
                list: list,
            }
            this.batchSmartParse(param)
        },
        //智能识别
        batchSmartParse(param) {
            mapbatchSmartParse(param).then((res) => {
                if (res.Data && res.Data.list && res.Data.list.length > 0) {
                    let result = res.Data.list[0]
                    console.log(result)
                    this.addParam.ProvinceId = result.ProvinceId
                    this.addParam.ProvinceName = result.ProvinceName
                    this.addParam.CityId = result.CityId
                    this.addParam.CityName = result.CityName
                    this.addParam.AreaId = result.AreaId
                    this.addParam.AreaName = result.AreaName
                    this.addParam.StreetId = result.StreetId
                    this.addParam.StreetName = result.StreetName
                    this.getRegionName()
                }
            })
        },
        selectPayWay() {
            this.$refs.popPayWay.open()
        },
        selectPayWayFn(item) {
            this.addParam.settlement = item.name
            this.$refs.popPayWay.close()
        },
        cancelSelectPayWayFn() {
            this.$refs.popPayWay.close()
        },
        rightClick(item) {
            var that = this
            if (this.addParam.StoreName == "") {
                this.easyToast("请输入客户名称")
                return false
            }
            if (this.addParam.DealerGradeName == "") {
                this.easyToast("请选择客户等级")
                return false
            }
            // if (this.addParam.DisId == 0) {
            // 	this.easyToast('请选择所属部门');
            // 	return false
            // }
            if (this.addParam.RealName == "") {
                this.easyToast("请输入姓名")
                return false
            }
            if (this.addParam.ContactTel == "") {
                this.easyToast("请输入手机号")
                return false
            }
            if (this.addParam.ContactTel.length < 11) {
                this.easyToast("手机号格式出错")
                return false
            }
            // if (!this.addParam.Longitude || !this.addParam.Latitude) {
            //     this.easyToast("请先定位地址")
            //     return
            // }
            if (this.addParam.Email && this.addParam.Email != "") {
                var regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
                if (!regEmail.test(this.addParam.Email)) {
                    this.easyToast("邮箱格式不正确")
                    return
                }
            }

            let param = {
                realName: this.addParam.RealName,
                storeName: this.addParam.StoreName,
                dealerGradeId: this.addParam.DealerGradeId,
                workerId: this.addParam.WorkerId,
                storeTagIds: this.addParam.StoreTagIds,
                disId: this.addParam.DisId,
                frameworkId: this.addParam.FrameworkId,
                provinceId: this.addParam.ProvinceId,
                provinceName: this.addParam.ProvinceName,
                cityId: this.addParam.CityId,
                cityName: this.addParam.CityName,
                regionId: this.addParam.AreaId,
                regionName: this.addParam.AreaName,
                streetId: this.addParam.StreetId,
                streetName: this.addParam.StreetName,
                contactAddress: this.addParam.ContactAddress,
                tel: this.addParam.ContactTel,
                email: this.addParam.Email,
                invitUserId: this.addParam.InvitUserId,
                // latitude: this.addParam.Latitude,
                // longitude: this.addParam.Longitude,
            }
            console.log(param)
            if (!this.submitOne) {
                this.submitOne = true
                if (this.StoreId) {
                    param.id = this.StoreId
                    GuideEditStore(param).then((res) => {
                        if (res.State == 1) {
                            this.easyToast("保存成功")
                            setTimeout(() => {
                                this.easyGoBack()
                                that.UP_CLIENT_VIEW(new Date().getTime())
                                this.submitOne = false
                            }, 500)
                        } else {
                            this.easyToast(res.Msg)
                            setTimeout((e) => {
                                this.submitOne = false
                            }, 500)
                        }
                    })
                } else {
                    param.id = 0
                    param.userPsw = this.addParam.ContactTel.substr(
                        this.addParam.ContactTel.length - 6,
                        this.addParam.ContactTel.length,
                    )
                    GuideAddStore(param).then((res) => {
                        if (res.State == 1) {
                            this.easyToast("保存成功")
                            setTimeout(() => {
                                this.easyGoBack()
                                that.UP_CLIENT_VIEW(new Date().getTime())
                                this.submitOne = false
                            }, 500)
                        } else {
                            this.easyToast(res.Msg)
                            setTimeout((e) => {
                                this.submitOne = false
                            }, 500)
                        }
                    })
                }
            }
        },
    },
}
</script>

<style lang="scss">
.cell-multi {
    padding-bottom: $app-page-padding;
}

.cell-multi-item {
    margin: $app-page-padding $app-page-padding 0 $app-page-padding;
}

.sub-item {
    &:last-child {
        border-bottom: none;
    }
}

.cell-item {
    height: 100rpx;
    background: $color-white;
    padding: 0 $app-page-padding;
    border-top: solid 1rpx #f0f0f0;
    display: flex;
    flex-direction: row;
    align-items: center;

    .label {
        font-size: $font-size-30;
        color: $color-gray-1;
        width: 180rpx;
        display: block;
    }

    .value {
        flex: 1;
        display: flex;
        justify-content: space-between;
        font-size: $font-size-30;
        color: #323232;
    }

    .icon-right {
        margin-right: -8rpx;
    }
}

.multi-header {
    height: 112rpx;
    border: none;

    .header-title {
        flex: 1;
        display: flex;
        align-items: center;
        font-weight: bold;
        font-size: $font-size-32;
        color: #252528;

        image {
            width: 48rpx;
            height: 48rpx;
            margin-right: 24rpx;
        }
    }

    .header-icon {
        display: flex;
        justify-content: flex-end;
        align-items: center;

        &>view {
            font-size: 28rpx;
            color: $color-gray-3;
            margin-right: 12rpx;
        }
    }
}

.input-item {}

.input-placeholder {
    font-size: $font-size-24;
    color: $app-color-text-desc;
}

.address-item {
    height: auto;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: $app-page-padding;

    .label {
        margin-bottom: 10rpx;
    }

    .btn-location {
        flex: 1;
        display: flex;
        align-items: center;
        border-radius: 100rpx;
        justify-content: flex-end;
        color: #333333;

        image {
            width: 24rpx;
            height: 24rpx;
            margin-right: 8rpx;
        }
    }

    .value-textarea {
        width: 100%;
        height: 86rpx;
        margin-bottom: 10rpx;
    }
}

.container {
    display: flex;
    flex-direction: column;
}

.operation-btn {
    display: flex;

    text {
        display: flex;
        align-items: center;
        padding-left: 50rpx;
        color: $app-color-main;
        height: 100rpx;
    }
}

.color-gray {
    color: $color-gray-3;
}

.dingwei {
    background: #f6f7f7;
    border-radius: 8rpx;
    padding: 24rpx;
    width: calc(100% - 48rpx);
    flex: 1;
}
</style>
